<template>
	<div v-if="a===true" class="show-from">
		<div class="edit-modal">
			<div class="modal-content">
				<input type="text" v-model="form.id" :disabled="true">
				<input type="text" v-model="form.vid" placeholder="请输入邮箱">
				<input type="text" v-model="form.views" placeholder="请输入观看数量">
				<button @click="save()">保存</button>
				<button @click="a = false">取消</button>
			</div>
		</div>
	</div>
	<!-- 添加一个外部容器，方便布局和应用背景 (如果需要) -->
	<div class="table-container">
		<!-- 搜索/导出区域 (保持注释掉的状态) -->
		<div class="header">
			<search />
		</div>

		<!-- 表格主体，应用磨砂玻璃和动画效果 -->
		<table border class="fixed-header-table frosted-glass">
			<thead>
				<tr>
					<!-- 表头单元格：定义了各列的基础宽度 -->
					<th style="width: 100px">id</th>
					<th style="width: 100px">vid</th>
					<th style="width: 100px">views</th>
					<!-- 最后一列操作列，宽度稍小 -->
					<th style="width: 100px">操作</th>
				</tr>
			</thead>
			<!-- 使用 transition-group 来包裹 v-for 实现列表动画 -->
			<!-- tag="tbody" 让它渲染为 tbody 元素 -->
			<!-- :css="true" 明确告知 Vue 使用 CSS 过渡 -->
			<transition-group name="list" tag="tbody" :css="true">
				<!-- 渲染实际的表格行 -->
				<!-- 注意: key 现在必须在 transition-group 的直接子元素上 -->
				<tr v-if="tableData.length > 0" v-for="(item) in paginatedData" :key="item.id">
					<td>{{ item.id }}</td>
					<td>{{ item.vid }}</td>
					<td>{{ item.views }}</td>
					<td>
						<!-- <button @click="handleView(item)" class="action-button view-button">查看</button> -->
						<button @click="handleEdit(item)" class="action-button edit-button">编辑</button>
						<button @click="handledel(item.id)" class="action-button del-button">删除</button>
					</td>
				</tr>
				<!-- "暂无数据" 或 "加载中" 提示 -->
				<!-- 需要用一个唯一的 key，并且放在 v-else 条件下 -->
				<tr v-else key="no-data-row">
					<td colspan="4" class="no-data-cell">{{ isLoading ? '数据加载中...' : '暂无数据' }}</td>
				</tr>
			</transition-group>
		</table>

		<!-- 分页控件区域 -->
		<div class="pagination">
			<label for="pageSize">每页显示数量:</label>
			<select v-model.number="pageSize" id="pageSize">
				<option value="10">10</option>
				<option value="50">50</option>
				<option value="100">100</option>
			</select>
			<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
			<button @click="nextPage" :disabled="currentPage === totalPages || totalPages === 0">下一页</button>
			<span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
			<span> (共 {{ tableData.length }} 条)</span>
		</div>
	</div>
</template>

<script setup>
	// --- Script 部分保持不变 ---
	import {
		ref,
		reactive,
		computed,
		watch,
		onMounted
	} from 'vue';
	import axios from '../../../apiaxios/axiosInstance';
	import search from './search/search.vue'
	import emitter from '@/utils/evenBus';

	const form = reactive({
		id: "",
		vid: "",
		views: ""
	})
	let a = ref(false);
	const tableData = ref([]);
	const currentPage = ref(1);
	const pageSize = ref(10);
	const isLoading = ref(false);
	
	
	

	const handleView = (item) => {
		console.log('查看:', item);
	};
	const handleEdit = (item) => {

		form.id = item.id;
		form.vid = item.vid;
		form.views = item.views;
		a.value = true;
	};
	const handledel = (id) => {
		isLoading.value = true;
		tableData.value = [];
		currentPage.value = 1;


		const Data = new URLSearchParams();
		Data.append('id', id);
		// alert(Data);

		axios.post("/backend/videoRank/deleteVideoRankById", Data, {
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			}
		}).then(response => {
			if (response.status === 200) {
				if (response.data.code != 200) {
					alert("删除失败");
				}

			} else {
				console.error("服务器响应错误:", response.status);
				alert("服务器响应错误！请稍后再试");
				tableData.value = [];
			}
		}).catch(error => {
			console.error("请求错误:", error);
			if (error.response) {
				console.error("API请求错误详情:", error.response.status, error.response.data);
				if (error.response.status === 400) {
					alert("请求参数有误");
				} else if (error.response.status === 401) {
					alert("未授权");
				} else {
					alert(`请求错误 (${error.response.status})`);
				}
			} else if (error.request) {
				console.error("网络错误:", error.request);
				alert("网络错误，无法连接到服务器");
			} else {
				alert("请求处理时发生错误");
			}
			tableData.value = [];
		}).finally(() => {
			isLoading.value = false;
		});
		setTimeout(() => {
			getdata(null);
		}, 2000);
	}

	function getdata(queryData) {
		isLoading.value = true;
		tableData.value = [];
		currentPage.value = 1;
		const data = {
			orderBy: 1,
			...queryData // 合并传入的查询数据
		};
		const Data = new URLSearchParams();
		for (const [key, value] of Object.entries(data)) {
			if (typeof value === 'object') {
				for (const [subKey, subValue] of Object.entries(value)) {
					Data.append(`${key}.${subKey}`, subValue);
				}
			} else {
				Data.append(key, value);
			}
		}

		axios.post("/backend/videoRank/loadDataList", Data, {
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			}
		}).then(response => {
			if (response.status === 200) {
				if (response.data.code === 200 && response.data.data && response.data.data.list) {
					const newData = response.data.data.list.map((item) => ({
						id: item.id,
						vid: item.vid,
						views: item.views
					}));
					console.log(newData);
					tableData.value = newData;
				} else {
					console.error("获取数据失败:", response.data.message || "返回数据格式错误");
					alert("获取数据失败: " + (response.data.message || "返回数据格式错误"));
					tableData.value = [];
				}
			} else {
				console.error("服务器响应错误:", response.status);
				alert("服务器响应错误！请稍后再试");
				tableData.value = [];
			}
		}).catch(error => {
			console.error("请求错误:", error);
			if (error.response) {
				console.error("API请求错误详情:", error.response.status, error.response.data);
				if (error.response.status === 400) {
					alert("请求参数有误");
				} else if (error.response.status === 401) {
					alert("未授权");
				} else {
					alert(`请求错误 (${error.response.status})`);
				}
			} else if (error.request) {
				console.error("网络错误:", error.request);
				alert("网络错误，无法连接到服务器");
			} else {
				alert("请求处理时发生错误");
			}
			tableData.value = [];
		}).finally(() => {
			isLoading.value = false;
		});
	}


	const totalPages = computed(() => {
		if (!tableData.value || tableData.value.length === 0) {
			return 0;
		}
		return Math.ceil(tableData.value.length / pageSize.value);
	});

	const paginatedData = computed(() => {
		if (!tableData.value || tableData.value.length === 0) {
			return [];
		}
		const start = (currentPage.value - 1) * pageSize.value;
		const end = start + pageSize.value;
		return tableData.value.slice(start, end);
	});

	const prevPage = () => {
		if (currentPage.value > 1) {
			currentPage.value--;
		}
	};
	const nextPage = () => {
		if (currentPage.value < totalPages.value) {
			currentPage.value++;
		}
	};

	function save() {
		isLoading.value = true;
		tableData.value = [];
		currentPage.value = 1;


		const data = {
			id: form.id,
			vid: form.vid,
			views: form.views

		};
		const Data = new URLSearchParams();
		for (const [key, value] of Object.entries(data)) {
			if (typeof value === 'object') {
				for (const [subKey, subValue] of Object.entries(value)) {
					Data.append(`${key}.${subKey}`, subValue);
				}
			} else {
				Data.append(key, value);
			}
		}
		// alert(Data);

		axios.post("/backend/videoRank/updateVideoRankById", Data, {
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			}
		}).then(response => {
			if (response.status === 200) {
				if (response.data.code != 200) {
					alert("删除失败");
				}

			} else {
				console.error("服务器响应错误:", response.status);
				alert("服务器响应错误！请稍后再试");
				tableData.value = [];
			}
		}).catch(error => {
			console.error("请求错误:", error);
			if (error.response) {
				console.error("API请求错误详情:", error.response.status, error.response.data);
				if (error.response.status === 400) {
					alert("请求参数有误");
				} else if (error.response.status === 401) {
					alert("未授权");
				} else {
					alert(`请求错误 (${error.response.status})`);
				}
			} else if (error.request) {
				console.error("网络错误:", error.request);
				alert("网络错误，无法连接到服务器");
			} else {
				alert("请求处理时发生错误");
			}
			tableData.value = [];
		}).finally(() => {
			isLoading.value = false;
		});
		a.value = false;
		setTimeout(() => {
			getdata(null);
		}, 2000);
	}

	watch(pageSize, () => {
		currentPage.value = 1;
	});
	onMounted(() => {
		// 监听来自 search 组件的查询事件
		emitter.on('searchData', (queryData) => {
			getdata(queryData);
		});
		// 监听导出事件
		emitter.on('exportData', () => {
			// 这里处理数据导出逻辑，例如将 tableData.value 转换为 CSV 格式并下载
			const data = tableData.value;
			const csvContent = "data:text/csv;charset=utf-8," +
				"id,vid,views\n" +
				data.map((row) => `${row.id},${row.vid},${row.views}`).join("\n");
			const encodedUri = encodeURI(csvContent);
			const link = document.createElement("a");
			link.setAttribute("href", encodedUri);
			link.setAttribute("download", "data.csv");
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		});
		getdata();

	});
</script>

<style lang="scss" scoped>
	/* 全局基础样式 */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		color: #000;
		font-size: 14px;
	}

	/* 页面背景示例 - 用于展示磨砂玻璃效果，请替换为你自己的背景 */
	// body {
	// 	background: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
	// 	padding: 20px; /* 给页面一些内边距 */
	// }

	/* 表格容器 */
	// .table-container {
	// 	width: 80%;
	// 	/* 容器宽度 */
	// 	margin: 40px auto;
	// 	/* 居中并添加上下边距 */
	// 	padding: 20px;
	// 	/* 容器内边距 */
	// 	// background: rgba(0,0,0,0.1); /* 可选：给容器一个淡淡的背景 */
	// 	border-radius: 15px;
	// 	/* 容器圆角 */

	// }

	.header {
		width: 70%;
		height: 80px;
		// background-color: #2196F3;
		border-radius: 30px;
		position: absolute;
		right: 10%;
		top: 12%;
		box-shadow: 0 8px 32px 0 rgba(82, 82, 82, 0.9);
		background-color: rgba(255, 255, 255, 0.5);
		/* 背景颜色，这里设置为白色，透明度为0.5 */
		backdrop-filter: blur(10px);
		/* 模糊效果，值越大越模糊 */
	}

	/* 表格主体样式 - 包含磨砂玻璃效果 */
	.fixed-header-table {
		width: 70%;
		/* 表格宽度占满容器 */
		table-layout: fixed;
		/* 固定表格布局 */
		border-collapse: separate;
		/* 需要 separate 才能让 tbody 有独立的背景和圆角 */
		border-spacing: 0;
		/* 去除单元格间距 */
		margin-bottom: 20px;
		/* 表格下方与分页控件的间距 */
		border-radius: 10px;
		/* 表格圆角 */
		overflow: hidden;
		/* 隐藏内部溢出的圆角 */
		box-shadow: 0 8px 32px 0 rgba(82, 82, 82, 0.9);
		/* 添加阴影增加立体感 */
		position: absolute;
		right: 10%;
		top: 28%;
		// background: linear-gradient(to right, #40ff1e 0%,#1981ff 50%, #b8f4ff 100%);
		background-image: url("../../../img/b1.jpg");
		background-size: cover;
		// opacity: 0.5;
		/* 调整透明度，0为完全透明，1为不透明 */
		color: #000;

		/* 磨砂玻璃效果 */
		&.frosted-glass {
			background-color: rgba(255, 255, 255, 0.65);
			/* 半透明背景色 */
			backdrop-filter: blur(10px);

			/* 背景模糊效果 */
			-webkit-backdrop-filter: blur(10px);
			/* Safari 兼容 */
			border: 1px solid rgba(255, 255, 255, 0.18);
			/* 可选：添加一个微妙的边框 */
		}

		/* 表头 (thead) 样式 */
		thead {
			display: block;
			/* 使表头成为块级元素 */
			// background-color: rgba(242, 242, 242, 0.8); /* 表头稍微不透明的背景 */
			background-color: transparent;
			/* 让表头也透明，透出磨砂背景 */
			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
			/* 表头下方分割线 */


			tr {
				display: table;
				/* 模拟表格行 */
				width: 100%;
				/* 占满宽度 */
				table-layout: fixed;
				/* 固定布局 */

			}
		}


		/* 表头单元格 (th) 样式 */
		th {
			padding: 12px 15px;
			/* 内边距 */
			text-align: left;
			/* 文本左对齐 */
			font-weight: 600;
			/* 字体稍粗 */
			color: #333;
			/* 表头文字颜色 */
			border: none;
			/* 移除默认边框 */
			overflow-wrap: break-word;
			font-size: 18px;
			font-weight: 800;
			color: #9cfafe;

			/* 最后一列的右边距，为滚动条预留 */
			&:last-child {
				padding-right: 32px;
				/* 15px (原padding) + 17px (滚动条) */
			}
		}

		/* 表体 (tbody / transition-group渲染的tbody) 样式 */
		tbody {
			display: block;
			/* 块级元素 */
			max-height: 450px;
			/* 表体最大高度 */
			overflow-y: auto;
			/* 垂直滚动条 */
			overflow-x: hidden;
			/* 隐藏水平滚动条 */
			background-color: transparent;
			/* 表体背景透明，让磨砂效果透过来 */

			/* Webkit 浏览器滚动条样式美化 (可选) */
			&::-webkit-scrollbar {
				width: 8px;
			}

			&::-webkit-scrollbar-track {
				background: rgba(255, 255, 255, 0.1);
				border-radius: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background: rgba(0, 0, 0, 0.3);
				border-radius: 4px;
			}

			&::-webkit-scrollbar-thumb:hover {
				background: rgba(0, 0, 0, 0.5);
			}


			/* 表体行 (tr) 样式 */
			tr {
				display: table;
				/* 模拟表格行 */
				width: 100%;
				/* 占满宽度 */
				table-layout: fixed;
				/* 固定布局 */
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				/* 行之间的分割线 */
				transition: background-color 0.2s ease-in-out;
				/* 背景色过渡 */

				&:last-child {
					border-bottom: none;
					/* 最后一行无下边框 */
				}

				/* 行的 Hover 效果 */
				&:hover {
					background-color: rgba(255, 255, 255, 0.3);
					/* 鼠标悬停时更亮的背景 */
				}
			}
		}

		/* 表体单元格 (td) 样式 */
		td {
			padding: 10px 15px;
			/* 内边距 */
			text-align: left;
			/* 文本左对齐 */
			color: #444;
			/* 单元格文字颜色 */
			border: none;
			/* 移除默认边框 */
			overflow-wrap: break-word;
			vertical-align: middle;
			/* 垂直居中 */
			font-size: 18px;
			font-weight: 400;
			color: #9cfafe;

			/* 设置与 th 对应的宽度 */
			&:nth-child(1) {
				width: 100px;
			}

			&:nth-child(2) {
				width: 100px;
			}

			&:nth-child(3) {
				width: 100px;
			}

			&:nth-child(4) {
				width: 100px;
			}

			/* "暂无数据" 或 "加载中" 单元格 */
			&.no-data-cell {
				text-align: center;
				color: #666;
				height: 150px;
				line-height: 150px;
				font-style: italic;
				width: 100%;
				background-color: transparent;
				/* 确保背景透明 */
			}

			/* 操作按钮的样式 */
			button.action-button {
				padding: 5px 10px;
				margin-right: 5px;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				font-size: 13px;
				transition: transform 0.15s ease, box-shadow 0.15s ease;
				/* 添加过渡 */

				&.view-button {
					background-color: #4CAF50;
					/* 绿色 */
					color: white;
				}

				&.edit-button {
					background-color: #2196F3;
					/* 蓝色 */
					color: white;
				}

				&.del-button {
					background-color: #f33712;
					/* 蓝色 */
					color: white;
				}

				/* 按钮悬停效果 */
				&:hover {
					transform: translateY(-2px);
					/* 轻微上移 */
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
					/* 添加阴影 */
				}

				/* 按钮点击效果 */
				&:active {
					transform: translateY(0px);
					/* 恢复位置 */
					box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
					/* 阴影变小 */
				}
			}
		}
	}


	/* "暂无数据" 所在的行 */
	.fixed-header-table tbody tr:has(td.no-data-cell) {
		width: 100%;
		background-color: transparent !important;
		/* 覆盖 hover 效果 */
		border-bottom: none;
		/* 无数据行不需要下边框 */
	}

	/* --- 列表进入/离开动画 --- */
	/* 定义动画基类 */
	.list-enter-active,
	.list-leave-active {
		transition: all 0.4s cubic-bezier(0.55, 0, 0.1, 1);
		/* 平滑的动画曲线 */
	}

	/* 进入动画的起始状态 */
	.list-enter-from {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
		/* 从下方稍微缩小并淡入 */
	}

	/* 离开动画的结束状态 */
	.list-leave-to {
		opacity: 0;
		transform: scale(0.95) translateX(30px);
		/* 向右侧稍微缩小并淡出 */
	}

	/* --- 分页控件区域样式 --- */
	.pagination {
		margin-top: 25px;
		/* 增加与表格的间距 */
		display: flex;
		/* 使用 flex 布局 */
		justify-content: center;
		/* 居中对齐 */
		align-items: center;
		/* 垂直居中 */
		gap: 12px;
		/* 控件间距 */
		padding: 10px;
		// background-color: rgba(255, 255, 255, 0.7); /* 可选：分页也用类似背景 */
		// backdrop-filter: blur(5px);
		// -webkit-backdrop-filter: blur(5px);
		// border-radius: 8px;
		// box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		position: absolute;
		right: 30%;
		bottom: 5%;


		label,
		span {
			color: #555;
			/* 标签和文字颜色 */
			font-size: 14px;
		}

		select {
			padding: 6px 10px;
			border: 1px solid #ccc;
			border-radius: 4px;
			background-color: white;
			cursor: pointer;
		}

		button {
			padding: 6px 12px;
			border: none;
			border-radius: 4px;
			background-color: #afe2fa;
			/* 按钮背景色 (靛蓝色) */
			color: white;
			cursor: pointer;
			transition: background-color 1s ease, opacity 0.3s ease, transform 0.1s ease;
			/* 添加过渡 */

			&:hover:not(:disabled) {
				background-color: #ac93e9;
				/* 悬停时深一点 */
				transform: translateY(-1px);
			}

			&:active:not(:disabled) {
				transform: translateY(0px);
			}

			&:disabled {
				background-color: #aaa;
				/* 禁用状态颜色 */
				cursor: not-allowed;
				opacity: 0.7;
			}
		}
	}

	.show-from {
		position: relative;
	}

	.edit-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: white;
		padding: 20px;
		border: 1px solid #ccc;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		z-index: 1000;
	}

	.modal-content {
		display: flex;
		flex-direction: column;
	}

	.modal-content input {
		margin-bottom: 10px;
	}
</style>